/**
 * 主页菜单配置
 */
import { RouterLink } from 'vue-router'
import { h, ref } from 'vue'
import { NIcon } from 'naive-ui'
import {
  DesktopSharp,
  AppsOutline,
  BarChartOutline,
  FileTrayFullOutline,
  PersonCircleOutline as UserIcon,
  LogOutOutline as LogoutIcon,
} from '@vicons/ionicons5'

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

function renderLabel(path, name) {
  return () =>
    h(
      RouterLink,
      {
        to: {
          path: path,
        },
      },
      { default: () => name }
    )
}

let menuOptions = ref([
  {
    label: '首页',
    key: 'hear-the-wind-sing',
    icon: renderIcon(AppsOutline),
    children: [
      {
        label: renderLabel('/work', '工作台'),
        key: 'work',
      },
    ],
  },
  {
    label: '系统管理',
    key: 'system',
    icon: renderIcon(DesktopSharp),
    disabled: false,
    children: [
      {
        label: renderLabel('/users', '用户管理'),
        key: 'usersys',
      },
    ],
  },
  {
    label: '图表管理',
    key: 'echarts',
    disabled: false,
    icon: renderIcon(BarChartOutline),
    children: [
      {
        label: renderLabel('/users', '测试图表一'),
        key: 'test-echarts1',
      },
      {
        label: renderLabel('/403', '测试图表二'),
        key: 'test-echarts2',
      },
    ],
  },
  {
    label: '账户详情',
    key: 'dance-dance-dance',
    icon: renderIcon(FileTrayFullOutline),
    children: [
      {
        label: '个人信息',
        key: 'people',
      },
    ],
  },
])

let headerMenu = ref([
  {
    label: '用户资料',
    key: 'profile',
    icon: renderIcon(UserIcon),
  },
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(LogoutIcon),
  },
])

export { menuOptions, headerMenu }
